<script setup>  
import {selectDataBoardBase,
  selectDataBoardExamList,
  selectCoursePie
} from '@/api/DashBoard.js'
import { onMounted, ref } from 'vue';  
import * as echarts from 'echarts';  
  
// 创建一个响应式引用来存储echarts容器的DOM引用  
const echartsContainer = ref(null);  
const chartT = ref(null);   
const tChartOption = {  
      title: {  
        text: '考试安排统计图'  
      },  
      tooltip: {},  
      xAxis: {  
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']  
      },  
      yAxis: {},  
      series: [{  
        name: '考试数量',  
        type: 'bar',  
        data: [5, 20, 36, 10, 10, 20]  
      }]  
    }
onMounted(() => {  
  // 确保echartsContainer.value不是null（即DOM元素已挂载）  
  if (echartsContainer.value) {  
    chartT.value = echarts.init(echartsContainer.value);  
    chartT.value.setOption(tChartOption);  
  }  
  getSelectDataBoardExamList()
});  
const getSelectDataBoardExamList = async () => {
  const res = await selectDataBoardExamList()
  console.log(res.data.data.map(item => item.examTime))
  tChartOption.series[0].data = res.data.data.map(item => item.examNum);  
  tChartOption.xAxis.data = res.data.data.map(item => item.examTime)  
  console.log(tChartOption)
  chartT.value.setOption(tChartOption); 
}


// 饼图容器引用  
const pieChartContainer = ref(null); 
const chart = ref(null);   
const pieChartData = ref([
]);  
  
// 饼图配置  
const pieChartOption = {  
  title: {  
    text: '选课占比',  
    left: 'center'  
  },  
  tooltip: {  
    trigger: 'item'  
  },  
  legend: {  
    orient: 'vertical',  
    left: 'left',  
  },  
  series: [  
    {  
      name: '访问来源',  
      type: 'pie',  
      radius: '50%',  
      data: pieChartData.value,  
      emphasis: {  
        itemStyle: {  
          shadowBlur: 10,  
          shadowOffsetX: 0,  
          shadowColor: 'rgba(0, 0, 0, 0.5)'  
        }  
      }  
    }  
  ]  
};  

  
// 组件挂载后初始化饼图  
onMounted(() => {  
  if (pieChartContainer.value) {  
    chart.value = echarts.init(pieChartContainer.value);  
    chart.value.setOption(pieChartOption);   
  }  
  getSelectCoursePie()
});  

// 饼图数据  
const getSelectCoursePie = async () => {
  const res = await selectCoursePie()
  pieChartOption.series[0].data = res.data.data;  
  chart.value.setOption(pieChartOption); 
}





const DataBoardBaseResp = ref({
  onlinePersonNum:'200',
  registerTeacherNum:'198',
  registerStudentNum:'324',
  courseNum:'700',
})
const getSelectDataBoardBase = async () => {
  const res = await selectDataBoardBase()
  DataBoardBaseResp.value = res.data.data
}
getSelectDataBoardBase()

</script>  
  
<template>  
  <div class="main">
    <div class="base-data">
      <el-card>
        <el-row>
          <el-col :span="6">
            <el-statistic title="在线人数" :value="DataBoardBaseResp.onlinePersonNum" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="老师注册量" :value="DataBoardBaseResp.registerTeacherNum" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="学生注册量" :value="DataBoardBaseResp.registerStudentNum" />
          </el-col>
          <el-col :span="6">
            <el-statistic title="课程数量" :value="DataBoardBaseResp.courseNum" />
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="cus-body">
      <el-row :gutter="20">
          <el-col :span="12">
              <div ref="echartsContainer" style="width:500px;height: 400px;"></div>  
          </el-col>
          <el-col :span="12">
              <div ref="pieChartContainer" style="width:500px;height: 400px;"></div>
          </el-col> 
        </el-row>
    </div>
  </div>


    
</template>

<style lang="scss" scoped>
  .main{
    .base-data{
      background-color: #fff;
    }
    .cus-body{
      background-color: #fff;
      min-height: 500px;
    }
    
  }
  .like {
    cursor: pointer;
    font-size: 25px;
    display: inline-block;
  }
  .cus-body{
    margin-top: 30px;
    padding: 30px;
    box-sizing: border-box;
    width: 100%;
  }
</style>